<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <!--
        受控组件和非受控组件中的`控`：受state状态的控制
        非受控组件：
        表单项不与state数据相向关联, `需要手动读取表单元素的值`，
        `借助于 ref获取真实DOM，在通过value获得输入值`，使用原生 DOM 方式来获取表单元素值 
    -->
    <script type="text/babel">
        //1、创建一个容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //2、创建类式组件
        //以登录界面
        //解构
        let { Component, createRef } = React;
        class App extends Component {
            //创建两个容器
            username = createRef();
            userpass = createRef();

            render() {
                // console.log(this.username)
                // console.log(this.userpass)
                console.log(this);
                return <div>
                    <form action="http://www.baidu.com">
                        <p>用户名：<input type="text" ref={this.username} /></p>
                        <p>密码：<input type="password" ref={this.userpass} /></p>
                        <p><button onClick={this.login} type="submit">登录</button></p>
                    </form>
                </div>
            }

            login = e => {
                //阻止事件默认行为 (超链接、表单)
                e.preventDefault();
                //获取用户名框中的内容
                console.log('用户名:', this.username.current.value)
                //获取密码框中的内容
                console.log('密码：', this.userpass.current.value)
            }
        }
        //3、渲染
        root.render(<App />)
    </script>
</body>

</html>